<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	</head>
	<body>
	<div class="layui-row">	
	    <div class="layui-panel layui-col-md8" style="padding: 8px;">
	        <div class="">
	            <table id="roleTable" lay-filter="roleTable"></table>
	        </div>
		</div>
		<div class="layui-panel layui-col-md4" style="padding: 0px;">
	        <div>
	            <div class="layui-card" style="position: relative;">
	                <div class="layui-card-header layui-bg-cyan">权限分配</div>
	                <div class="layui-card-body">
	                	
	                    <div id="menuTree" class="layui-tree"></div>
	                    
	                </div>
	            </div>
	            <div class="layui-bg-gray" style="bottom: 0px;background-color: #fff;padding-top: 10px;
	            	position: absolute;height: 50px;width: 100%;text-align: center;left: 0px;">
	                <a class="layui-btn layui-btn-normal" lay-event="saveGrant">提交保存</a>
	                <a class="layui-btn layui-btn-primary" lay-event="clearCheck">清除选中</a>
	            </div>
	        </div>
	        
		</div>
	</div>
    <script id="tableBar" type="text/html">
        <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </a>
        <a class="layui-btn layui-btn-warm layui-btn-md" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </a>
    </script>
    <div id="addRole" style="display: none">
        <div class="layui-container">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="name" autocomplete="off" placeholder="角色名称，输入中文">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" name="content" placeholder="输入描述"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="0" title="可用">
                        <input type="radio" name="status" value="1" title="不可用">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        var data =  [{
            "name":"123","content":"123"
        }]
        var $;
        layui.use(['table','form','layer','jquery'],function () {
            var table = layui.table;
			$ = layui.jquery;
			setHeight();
            table.render({
                elem:'#roleTable',
                height:'full-100',
                page:true,
                //url:'${ssm}/system/rc/find',
                toolbar:'#tableBar',
                where:{
                    status:0
                },
                cols:[
                    [
                    {type:'numbers',fixed:'left'},
                    {type:'checkbox',fixed:'left'},
                    {field:'name',title:'角色名称',width:200},
                    {field:'content',title:'角色描述'},
                    {field:'status',title:'是否可用',width:100},
                    {field:'createTime',title:'创建时间',width:200},
                ]
                ],data:data
            });
        });
        //获取页面高度
		function setHeight(){
			var height = window.outerHeight-258;
			$('.layui-panel').css('height',height);
		}
    </script>
</body>

</html>
